<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" %>
<%@ taglib prefix="inputlib" uri="/WEB-INF/taglibs-input.tld" %>
<%@ page import="tau.dimes.web.UserFiles"%>
<%@ page import="java.io.File"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<jsp:useBean id="visualization" class="tau.dimes.beans.Visualization" />
<jsp:setProperty property="*" name="visualization"/>
<%
	if (request.getMethod().equalsIgnoreCase("GET"))
	{
		visualization.setVisualizationType("topology");
		visualization.setProvider("file");
		visualization.setWindowSize(5);
		visualization.setInterval(2000);
		visualization.setResolution("medium");
		visualization.setShowGrid(true);
		visualization.setSmooth(true);
		visualization.setAviRecord(false);
		visualization.setFps(25);
		visualization.setFadeButKeep(true);
		visualization.setMaxCircleRadius(8);
		visualization.setZoomMode("auto");
		visualization.setMinLatitude(-90);
		visualization.setMaxLatitude(90);
		visualization.setMinLongitude(-180);
		visualization.setMaxLongitude(180);
	}
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dimes - Visualization</title>
</head>
<body>
<%@ include file="Header.jsp"%>
<script type="text/javascript" src="<%=root%>/script/visualization.js"></script>
<inputlib:form action="" method="post" bean="visualization">
	<table id="tblAppletHeader" class="tblAppletHeader">
		<tr>
			<td class="tdLeft">
				<label id="lblVisualizationType" class="lblLeft">Visualization: </label>
			</td>
			<td class="tdRight">
				<inputlib:select name="visualizationType">
					<inputlib:option value="topology">Topology</inputlib:option>
					<inputlib:option value="heatmap">Heat Map</inputlib:option>
				</inputlib:select>
			</td>
			<td class="tdLeft">
				<label id="lblProvider" class="lblLeft">Provider: </label>
			</td>
			<td class="tdRight">
				<inputlib:select name="provider">
					<inputlib:option value="file">File</inputlib:option>
				</inputlib:select>
			</td>
			<td class="tdLeft">
				<label id="lblFilename" class="lblLeft">File Name: </label>
			</td>
			<td class="tdRight">
				<inputlib:select name="filename">
				<%
					if (login.isLoggedIn())
					{
						UserFiles userFiles = new UserFiles(login.getUsername(), application);
						String[] files = userFiles.listFiles(".trace.xml");
						for (String file : files)
						{
				%>
					<inputlib:option value="<%= file %>"><%= file.substring(0, file.length() - 10) %></inputlib:option>
				<%
						}
					}
				%>
				</inputlib:select>
			</td>
			<td class="tdLeft">
				<label id="lblShowGrid" class="lblLeft">Show Grid: </label>
			</td>
			<td class="tdRight">
				<inputlib:checkbox name="showGrid" value="true" default="true" />
			</td>
			<td class="tdLeft">
				<label id="lblAviRecord" class="lblLeft">Record AVI: </label>
			</td>
			<td class="tdRight">
				<inputlib:checkbox name="aviRecord" value="true" default="true" />
			</td>
			<td></td>
		</tr>
		<tr>
			<td class="tdLeft">
				<label id="lblWindowSize" class="lblLeft">Window Size: </label>
			</td>
			<td class="tdRight">
				<inputlib:select name="windowSize">
					<inputlib:option value="1">1</inputlib:option>
					<inputlib:option value="2">2</inputlib:option>
					<inputlib:option value="3">3</inputlib:option>
					<inputlib:option value="4">4</inputlib:option>
					<inputlib:option value="5">5</inputlib:option>
					<inputlib:option value="10">10</inputlib:option>
					<inputlib:option value="15">15</inputlib:option>
					<inputlib:option value="20">20</inputlib:option>
					<inputlib:option value="25">25</inputlib:option>
					<inputlib:option value="30">30</inputlib:option>
				</inputlib:select>
			</td>
			<td class="tdLeft">
				<label id="lblInterval" class="lblLeft">Interval: </label>
			</td>
			<td class="tdRight">
				<inputlib:select name="interval">
					<inputlib:option value="500">500</inputlib:option>
					<inputlib:option value="1000">1000</inputlib:option>
					<inputlib:option value="2000">2000</inputlib:option>
					<inputlib:option value="3000">3000</inputlib:option>
					<inputlib:option value="5000">5000</inputlib:option>
				</inputlib:select>
			</td>
			<td class="tdLeft">
				<label id="lblResolution" class="lblLeft">Resolution: </label>
			</td>
			<td class="tdRight">
				<inputlib:select name="resolution">
					<inputlib:option value="low">Low</inputlib:option>
					<inputlib:option value="medium">Medium</inputlib:option>
					<inputlib:option value="high">High</inputlib:option>
				</inputlib:select>
			</td>
			<td class="tdLeft">
				<label id="lblSmooth" class="lblLeft">Smooth: </label>
			</td>
			<td class="tdRight">
				<inputlib:checkbox name="smooth" value="true" default="true" />
			</td>
			<td class="tdLeft">
				<label id="lblFps" class="lblLeft">Fps: </label>
			</td>
			<td class="tdRight">
				<inputlib:select name="fps">
					<inputlib:option value="24">24</inputlib:option>
					<inputlib:option value="25">25</inputlib:option>
					<inputlib:option value="30">30</inputlib:option>
				</inputlib:select>
			</td>
			<td></td>
		</tr>
		<tr>
			<td class="tdLeft">
				<label id="lblZoomMode" class="lblLeft">Zoom Mode: </label>
			</td>
			<td class="tdRight">
				<inputlib:select name="zoomMode">
					<inputlib:option value="auto">Automatic</inputlib:option>
					<inputlib:option value="manual">Manual</inputlib:option>
				</inputlib:select>
			</td>
			<td class="tdLeft">
				<label id="lblMinLatitude" class="lblLeft">Min Latitude: </label>
			</td>
			<td class="tdRight">
				<inputlib:text name="minLatitude" size="4" />
			</td>
			<td class="tdLeft">
				<label id="lblMaxLatitude" class="lblLeft">Max Latitude: </label>
			</td>
			<td class="tdRight">
				<inputlib:text name="maxLatitude" size="4" />
			</td>
			<td class="tdLeft">
				<label id="lblFadeButKeep" class="lblLeft">Fade But Keep: </label>
			</td>
			<td class="tdRight">
				<inputlib:checkbox name="fadeButKeep" value="true" default="true" />
			</td>
			<td class="tdLeft"></td>
			<td class="tdRight"></td>
			<td></td>
		</tr>
		<tr>
			<td class="tdLeft">
				<label id="lblBgImage" class="lblLeft">Background: </label>
			</td>
			<td class="tdRight">
				<inputlib:select name="bgImage">
				<%
					String bgImagesPath = application.getRealPath("/bgImages");
					File filesDir = new File(bgImagesPath);
					
					if (filesDir.exists())
					{
						File[] files = filesDir.listFiles();
						for (File file : files)
						{
				%>
					<inputlib:option value="<%= file.getName() %>"><%= file.getName().substring(0, file.getName().lastIndexOf('.')) %></inputlib:option>
				<%
						}
					}
				%>
				</inputlib:select>
			</td>
			<td class="tdLeft">
				<label id="lblMinLongitude" class="lblLeft">Min Longitude: </label>
			</td>
			<td class="tdRight">
				<inputlib:text name="minLongitude" size="4" />
			</td>
			<td class="tdLeft">
				<label id="lblMaxLongitude" class="lblLeft">Max Longitude: </label>
			</td>
			<td class="tdRight">
				<inputlib:text name="maxLongitude" size="4" />
			</td>
			<td class="tdLeft">
				<label id="lblMaxCircleRadius" class="lblLeft">Circle Radius: </label>
			</td>
			<td class="tdRight">
				<inputlib:select name="maxCircleRadius">
					<inputlib:option value="6">6</inputlib:option>
					<inputlib:option value="7">7</inputlib:option>
					<inputlib:option value="8">8</inputlib:option>
					<inputlib:option value="9">9</inputlib:option>
					<inputlib:option value="10">10</inputlib:option>
					<inputlib:option value="11">11</inputlib:option>
					<inputlib:option value="12">12</inputlib:option>
					<inputlib:option value="13">13</inputlib:option>
					<inputlib:option value="14">14</inputlib:option>
					<inputlib:option value="15">15</inputlib:option>
				</inputlib:select>
			</td>
			<td class="tdLeft"></td>
			<td class="tdRight"></td>
			<td class="tdButton">
				<button id="submit" name="submit" value="submit">Submit</button>
			</td>
		</tr>
	</table>
	<div id="divApplet" class="divApplet">
		<script type="text/javascript" src="http://www.java.com/js/deployJava.js"></script>
		<script type="text/javascript">
			/* <![CDATA[ */
			var attributes = { code:'tau.dimes.visualization.applet.DimesVApplet.class',
			                   width: <%= visualization.getWidth() %>, 
			                   height: <%= visualization.getHeight() %> } ;
			var parameters = { jnlp_href: '<%= application.getContextPath() %>/DimesVApplet.jnlp',
							   type: <%= "'" + visualization.getVisualizationType() + "'" %>,
							   interval: <%= visualization.getInterval() %>,
							   window: <%= visualization.getWindowSize() %>, 
			   				   xmlrequest: <%= "'" + visualization.getXMLRequest().replace("\"", "&quot;") + "'" %>,
			   				   showGrid: <%= visualization.isShowGrid() %>,
			   				   smooth: <%= visualization.isSmooth() %>,
			   				   aviRecord: <%= visualization.isAviRecord() %>,
			   				   fps: <%= visualization.getFps() %>,
			   				   fadeButKeep: <%= visualization.isFadeButKeep() %>,
			   				   maxCircleRadius: <%= visualization.getMaxCircleRadius() %>,
			   				   zoomMode: <%= "'" + visualization.getZoomMode() + "'" %>,
			   				   minLatitude: <%= visualization.getMinLatitude() %>,
			   				   maxLatitude: <%= visualization.getMaxLatitude() %>,
			   				   minLongitude: <%= visualization.getMinLongitude() %>,
			   				   maxLongitude: <%= visualization.getMaxLongitude() %>,
			   				   bgImage: <%= "'" + visualization.getBgImage() + "'" %>,
			   				   };
						
			var version = '1.5';
			<%
				if (visualization.getSubmit() != null)
					out.write("deployJava.runApplet(attributes, parameters, version);");
			%>
          	/* ]]> */
        </script>
	</div>
</inputlib:form>
</body>
</html>